<template>
  <el-dialog :title=meetingVO.name :visible.sync="visible" width="74%" :center="true" :close-on-click-modal="false">
    <el-card shadow="never" class="box-card"
             style="border:none; margin-top:0;flex-grow: 3;flex-basis: 0; padding: 0px; width: 100%">
      <el-descriptions class="margin-top" :column="3" :size="size" border
                       :label-style="{ width: '120px', minWidth: '120px' }">
        <el-descriptions-item :span="2">
          <template slot="label">
            <i class="el-icon-user"></i>
            会议主题
          </template>
          {{ meetingVO.subject }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            附件
          </template>
          <el-link v-for="item in meetingVO.meetingAttachments" :key="item.id" :href="item.filePath"
                   target="_blank" style="margin-right: 5px">{{ item.filePath.split('/').pop() }}
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            会议开始时间
          </template>
          {{ meetingVO.startTime }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-tickets"></i>
            会议结束时间
          </template>
          {{ meetingVO.endTime }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            会议地址
          </template>
          {{ meetingVO.address }}
        </el-descriptions-item>
        <el-descriptions-item :span="1">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            主持人
          </template>
          {{ meetingVO.host }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            参会人员
          </template>
          <el-tag v-for="(item, index) in meetingVO.meetingAttendeesList" :key="index"
                  style="margin-right: 5px">
            {{ item.name }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            会议议程
          </template>
          <el-table :data="meetingVO.meetingAgendaList" size="mini" border>
            <el-table-column label="序号" type="index" width="70px"></el-table-column>
            <el-table-column label="内容" prop="agenda"></el-table-column>
            <el-table-column label="主持人" prop="host" width="100px"></el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            会议要求
          </template>
          {{ meetingVO.requirement }}
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            会议议案
          </template>
          <div style="border: 1px solid #eee;">
            <el-table :data="meetingRecord" style="border:none !important;">
              <el-table-column label="序号" type="index" width="70px"></el-table-column>
              <el-table-column label="内容">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.content"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="提交人" width="100px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.recorder" readonly></el-input>
                </template>
              </el-table-column>
              <el-table-column width="100px">
                <template slot-scope="scope">
                  <el-button-group style="display: flex; gap: 10px; color:#1989FA">
                    <el-button type="text" size="medium" v-if="scope.row.recorder === userName">
                      <i class="el-icon-check" @click="submitRecord(scope.$index)"></i>
                    </el-button>
                    <el-button type="text" size="medium" v-if="scope.row.recorder === userName">
                      <i class="el-icon-minus" @click="deleteMeetingRecordRow(scope.$index)"></i>
                    </el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="text" @click="addMeetingRecordRow()" style="margin-left: 10px"><i class="el-icon-plus"></i>增加议案
            </el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-popover title="注意事项" content="如有议案，请点击增加议案按钮添加完毕后再确认。" placement="top-start" trigger="hover" width="200px">
        <el-button type="primary" @click="updateMeeting" size="mini" slot="reference">确 认</el-button>
      </el-popover>

      <el-button type="primary" @click="cancle" size="mini" style="margin-left: 20px">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from "moment";

export default {
  name: "PrepareMeetingRecord",
  data() {
    return {
      size: 'mini',
      search: '',
      data: [],
      value: '',
      meetingVO: {},
      meetingRecord: [],
      userName: '',
    }
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.isVisible;
      },
      set(value) {
        this.$store.commit('setIsVisible', value);
      }
    },
  },
  watch: {
    visible(newVal) {
      console.log('Visible changed to: ', newVal);
    }
  },
  methods: {
    isCurrentDate(day) {
      const today = new Date();
      const formattedToday = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
      return day === formattedToday;
    },
    addMeetingRecordRow() {
      this.meetingRecord.push({content: '', recorder: this.userName});
    },
    deleteMeetingRecordRow(index) {
      this.meetingRecord.splice(index, 1);
    },
    submitRecord(index) {
      const currentRecord = this.meetingRecord[index];
      if (!currentRecord.content || currentRecord.content.trim() === '') {
        this.$message({type: "error", message: "议案不能为空，请输入内容", showClose: true});
        return;
      }
      const meetingRecord = {
        ...this.meetingRecord[index],
        meetingId: this.meetingVO.id
      }
      this.$http.post("/meeting/record/", meetingRecord).then((response) => {
        console.log(JSON.stringify(meetingRecord, null, 2))
        if (response.data.code == 1) {
          this.$message({type: "success", message: "提交成功:", showClose: true})
        } else {
          this.$message({type: "error", message: "提交失败:", showClose: true})
        }
      })
    },
    updateMeeting() {
      const meetingId = this.meetingVO.id
      this.$http.post(`/meeting/confirm/${meetingId}`).then((response) => {
        if (response.data.code == 1) {
          this.$message({type: "success", message: "确认完成", showClose: true})
        } else {
          this.$message({type: "error", message: "失败", showClose: true})
        }
      })
      this.visible = false
    },
    cancle() {
      this.visible = false
    }
  },
  mounted() {
    this.visible = true
    const taskId = this.$store.state.taskId
    this.userName = JSON.parse(localStorage.getItem('user')).nickName;
    this.$http.get(`/meeting/detail_inTask/${taskId}`).then((response) => {
      if (response.data.code == 1) {
        this.meetingVO = response.data.data
        console.log(`会议数据:${JSON.stringify(this.meetingVO, null, 2)}`)
        const meetingId = this.meetingVO.id
        console.log(`查询会议记录的会议id是${meetingId}`)
        this.$http.get(`/meeting/record/${meetingId}`).then((response) => {
          if (response.data.code == 1) {
            this.meetingRecord = response.data.data
            console.log(`会议记录数据:${JSON.stringify(this.meetingRecord, null, 2)}`)
          } else {
            this.$message({type: "error", message: "获取会议记录数据不成功:", showClose: true})
          }
        })
      } else {
        this.$message({type: "error", message: "获取会议数据失败:", showClose: true})
      }
    })
  }
}
</script>
<style scoped>
</style>